@import "styles";

.ThemeSwitcher {
  position: relative;
  max-width: 94px;
  width: 100%;
  height: 40px;

  &-Controls {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-DisplayButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    width: 50%;
    z-index: 1;

    span {
      display: flex;
      align-items: center;
    }

    svg {
      height: 20px;
      width: 20px;
      fill: $color-dark-gray;
    }

    path {
      fill: $color-dark-gray;
    }

    &__checked {
      svg {
        fill: $color-primary;
      }

      path {
        fill: $color-primary;
      }
    }
  }
}
